Start to play Game!

Game Repository

Overview and Usage

Development Process

  1. Clone MP3 file
    - Set up the new repository in Github
    - Clone MP3 file into the new repository

  2. Develop the Javascript Page
    - Transfering Gif into the Png file and LoadAnimation inside of the JS file.
    - Improving the Gameover interface.
    - Set more conditional to make Mario moving right, left and able to jump only one time.
    - Fixing the “collusion” issue with overlap. - Changing the camera position and velocity. - Create a shooting function and 2 new monsters. - Thinking about the way to allow Mario to kill Gooma by jumping on its head.

    3. Javascript

    Javascript

    Javascript

    Javascript

    Javascript

    Javascript

    Javascript

    Javascript

  3. Improving with Rollup
    - Inserting all of images into "copy" part

    4. rollup.config.js file


  4. Deploying to Github Pages
    - Deleting the node_modules from dist and Run the deploy script with “npm run deploy” again to deploy my game


Issue Deep-Dive

  1. The problem I encountered:
    - Animation set up: I couldn't add gif into my Game directly
    - Animation speed up: the animation will run faster and faster
    - Spinning issue: The mario will start spin after he contact with Gooma
    - how to kills Gooma: No idea how to make Mario kills Gooma by jumping on Gooma
    - Bullet issue: After Mario shoot bullets, the mario will start to spin again
    - Moving issue: After I press "A" or "D", Mario could only move left or right less than 1 second. I want Mario able to continue moving until player release the keys.
    - Mario.Remove() issue: Before MVP, mario.remove() and mariobullet[i].remove is working well. But it's not working this week.
    - Invisible Mariobullet: Invisible Mariobullet[i] will destory the monsters when I restart the game

  2. How I resolved these issues:
    - Animation set up
    Save the Gif and convert to png files. Then, using "loadAnimation" to insert each single png file.

    - Animation speed up
    In the setup function, creating the new Group() and use ".addAni" to add ("random name", the variable that I store the loadAnimation);
    In the draw function, write the code like: 
              
            if (random() > 0.995) {
              let new_Gooma = new GoomaMonster.Sprite(width, height-100, 100, 100);
              new_Gooma.scale = 0.3;
            }


    - Spining issue
    Instead of using the collision, I use the overlap.

    - How to kills Gooma
    Considering to create another condition when mario overlap with Gooma, like: 
              
            if (mario.overlap(GoomaMonster[i])) {
              // if (mario.overlap(GoomaMonster[i], {preventOverlap: true})) {
                // check if the player is jumping
                if (mario.position.y < height-90) {
                  // the player is jumping, remove the monster
                  GoomaMonster[i].remove();
                  score = score + 1;
                } else {
                  // the player is not jumping, end the game
                  endGame();
                }
              } else {
                GoomaMonster[i].position.x -= 0.5;
              }
            }


    - Bullet issue
    I find out the Push() will cause this problem. So I set up the bullet.velocity.x; bullet.velocity.y; bullet.position.y before push the bullets

    - Moving issue
    I addEventListener with ‘keydown':
              
            document.addEventListener('keydown', function(event) {
              if (event.key === 'a') {
                mario.velocity.x = -10;
              }
              if (event.key === 'd') {
                mario.velocity.x = 1;
              }
            });


    - Mario.Remove() issue
    Seems like I was trying to remove a sprite that has already been removed from the group. Therefore, I tried to make mario invisible, set mario's velocity to zero and set mario to its original position.
    For MarioBullets, I tried to make mario invisible
              
            mario.visible = false;
            mario.velocity.x = 0;
            mario.velocity.y = 0;
            mario.position.x = 50;
            mario.position.y = height-90;
            for (var i = 0; i < MarioBullets.length; i++) {
              MarioBullets[i].visible = false;
            }
    - Invisible Mariobullet
    When player start the game, create a delay of 5 seconds before creating a new GoomaMonster and FlyMonster
              
            let monsterDelay = -1;
            if (monsterDelay === -1) {
              monsterDelay = frameCount + 60 * 5;
            }
            if (frameCount >= monsterDelay) {
              if (random() > 0.995) {
                let new_Gooma = new GoomaMonster.Sprite(width, height-100, 100, 100);
              // new GoomaMonster.Sprite(width, height-100, 50, 50);
              // Gooma = createSprite(width,height-100,50,50);
              // Gooma.addAnimation("running", Gooma_running);
                new_Gooma.scale = 0.3;
              // GoomaMonster.add(Gooma)
              }
              if (random() > 0.995) {
                let new_fly = new flyMonster.Sprite(width, random(height-400, height - 200), 100, 100);
                new_fly.scale = 0.3;
              }
            }

Ideas and Future Work

  1. Want to create the game levels with different terrains.
  2. Want to stop Mario’s animation if Mario is not moving.
  3. Want to let monsters have intelligence that can track Mario.
  4. Want to completely remove Mario and Mario Bullets, not set it invisible

Kudos